<template>
  <component :is="getComponent(column.type,column.component)"
             v-model="text"
             v-on="event"
             v-bind="bind"
             :column="Object.assign(column,params)"
             :dic="dic"
             ref="temp"
             :disabled="column.disabled || disabled"
             :readonly="column.readonly || readonly"
             :placeholder="getPlaceholder(column)"
             :props="column.props || props"
             :size="column.size || size"
             :type="type || column.type"
             :column-slot="columnSlot"
             @keydown.native="keyupEvent($event)"
             @change="handleChange">
    <span v-if="params.html"
          v-html="params.html"></span>
    <template :slot="item.prop"
              v-for="item in columnSlot"
              slot-scope="scope">
      <slot v-bind="scope"
            :name="item.prop"></slot>
    </template>
  </component>
</template>

<script>
import { getComponent, getPlaceholder } from "../core/dataformat";
import slot from '../core/slot.js'
export default {
  name: 'form-temp',
  mixins: [slot],
  props: {
    value: {},
    uploadBefore: Function,
    uploadDelete: Function,
    uploadAfter: Function,
    uploadPreview: Function,
    uploadError: Function,
    uploadExceed: Function,
    columnSlot: {
      type: Array,
      default: () => {
        return []
      }
    },
    props: {
      type: Object
    },
    clearable: {
      type: Boolean
    },
    enter: {
      type: Boolean,
      default: false
    },
    type: {
      type: String
    },
    dic: {
      type: Array
    },
    placeholder: {
      type: String
    },
    size: {
      type: String
    },
    disabled: {
      type: Boolean
    },
    readonly: {
      type: Boolean
    },
    column: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      first: false,
      text: undefined,
    }
  },
  computed: {
    params () {
      return this.column.params || {}
    },
    event () {
      return this.column.event || {}
    },
    bind () {
      const obj = {
        ...this.column,
        focus: this.column.focus || function () {
          const obj = this.$children[0]
          if (this.column.type === 'date') { // 日期控件重写
            // obj.pickerVisible = false
            if (obj.blur) obj.blur = () => { }
          }
        }
      }
      return obj
    }
  },
  watch: {
    text: {
      handler (val) {
        if (this.first || !this.validatenull(val)) {
          this.first = true;
          this.$emit('input', val);
        } else {
          this.first = true;
        }
      }
    },
    value: {
      handler (val) {
        this.text = val;
      },
      immediate: true
    }
  },
  methods: {
    getComponent,
    getPlaceholder,
    handleChange (val) {
      this.$emit('change', val)
    },
    keyupEvent (e) {
      const type = this.column.type || 'input'
      switch (e.keyCode) {
        case 13: // enter
          this.$emit('enter')
          break
        case 40: // 向下
          switch (type) {
            case 'date':
            // this.$children[0].$children[0].pickerVisible = true
            case 'select':
            case 'number':
              return
          }
          this.$emit('bottom-cell')
          break;
        case 38: // 向上
          switch (type) {
            case 'select':
            case 'number':
              return
          }
          this.$emit('top-cell')
          break;
        case 37: // 向左
          if (type === 'date' && this.$children[0].$children[0].pickerVisible) return
          this.$emit('left-cell')
          break;
        case 39: // 向右
          if (type === 'date' && this.$children[0].$children[0].pickerVisible) return
          this.$emit('right-cell')
          break;
        case 9:
          this.$emit('right-cell')
          break
      }
    }
  }
}
</script>